<template>
  <view :class="loadFinish ?'':'game-detail'">
    <navBar :navbarData.sync="navbarData"></navBar>
    <view class="game-box" v-show="loadFinish">
      <!-- 规则按钮-->
      <view class="game-rules" @click="hanldeOpenRules">
        <image style="width: 100%;"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/game-rules.png" mode="widthFix">
        </image>
      </view>
      <!-- 查看壁纸-->
      <view class="game-wallpaper" @click="hanldeWallpaper" v-if="viewWall">
        <image style="width: 100%;"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/view-bizhi.png" mode="widthFix">
        </image>
      </view>
      <!-- 左边箭头 -->
      <view class="left-btnbox" @click="handleLeft">
        <image style="width:100%;padding:0;border:0;margin:0;height: auto;" mode="widthFix"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/left.png">
      </view>
      <!-- 右边箭头 -->
      <view class="right-btnbox" @click="handleRight">
        <image style="width:100%;padding:0;border:0;margin:0;height: auto;" mode="widthFix"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/right.png">
      </view>
      <!-- 元素收集的盒子 -->
      <view class="element-box">
        <view class="element-listbox" v-for="(item,index) in Elementlist" :key="index" @click="handelElementList(item)">
          <!-- 收集到的元素图片 -->
          <image style="width:116rpx;padding:0;border:0;margin:0;height: auto;" mode="widthFix" v-if="item.status"
            :src="item.SelectImg">
            <!-- 默认图片 -->
            <image style="width:82rpx;padding:0;border:0;margin:0;height: auto;" mode="widthFix" v-else
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/1.png">
        </view>
      </view>
      <scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="scrollDomView"
        :scroll-left="scrollLeft" @scroll="gameBoxScroll"
        style="height:100vh;white-space: nowrap;display:flex;flex-direction:row;align-self:flex-start;justify-self:flex-start;margin-bottom:0;padding-left:0;font-size:0;">
        <view class="scroll_item_box">
          <!-- 小树 -->
          <view :class="isIphoneX ? 'treelet1624':'treelet1334'" @click="handleCollection('treelet')" v-if="treelet">
          </view>
          <!-- 马 -->
          <view :class="isIphoneX ? 'horse1624':'horse1334'" @click="handleCollection('horse')" v-if="horse">
          </view>
          <!-- 三文鱼 -->
          <view :class="isIphoneX ? 'fish1624':'fish1334'" @click="handleCollection('fish')" v-if="fish">
          </view>
          <!-- 海浪 -->
          <view :class="isIphoneX ? 'SeaWave11624':'SeaWave11334'" style="" @click="handleCollection('SeaWave')"
            v-if="SeaWave">
          </view>
          <view :class="isIphoneX ? 'SeaWave21624':'SeaWave21334'" @click="handleCollection('SeaWave')" v-if="SeaWave">
          </view>
          <!-- 孔雀 -->
          <view :class="isIphoneX ? 'Peacock11624':'Peacock11334'" @click="handleCollection('Peacock')" v-if="Peacock">
          </view>
          <view :class="isIphoneX ? 'Peacock21624':'Peacock21334'" @click="handleCollection('Peacock')" v-if="Peacock">
          </view>
          <!-- 大树 -->
          <view style="width: 1998rpx;height: 432rpx;position: absolute;top: 0%;right: 0%;z-index: 99;"
            @click="handleCollection('BigTree')" v-if="BigTree">
          </view>
          <view :class="isIphoneX ? 'BigTree21624':''" @click="handleCollection('BigTree')" v-if="BigTree">
          </view>
          <view :class="isIphoneX ? 'BigTree31624':'BigTree31334'" @click="handleCollection('BigTree')" v-if="BigTree">
          </view>
          <view :class="isIphoneX ? 'BigTree41624':''" @click="handleCollection('BigTree')" v-if="BigTree">
          </view>
          <view :class="isIphoneX ? 'BigTree51624':''" @click="handleCollection('BigTree')" v-if="BigTree">
          </view>
          <view :class="isIphoneX ? 'BigTree61624':''" @click="handleCollection('BigTree')" v-if="BigTree">
          </view>
          <view :class="isIphoneX ? 'BigTree71624':''" @click="handleCollection('BigTree')" v-if="BigTree">
          </view>
          <view class="scroll_item_inner">
            <!-- 收集元素部分 -->
            <!-- 大树 -->
            <view style="width: 2296rpx;position: absolute;top: 0%;left: 0%;">
              <image style="width:100%;position: absolute;top: 0%;left: 0%;" mode="widthFix"
                src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/n-bigtree.png"
                @error="imgLoadFinish" @load="imgLoadFinish">
                <image :class="ele == 'BigTree' ? 'glowElement': 'displaynone'"
                  style="width:100%;position: absolute;top: 0%;left: 0%;" mode="widthFix" :src="tree1"
                  @error="imgLoadFinish" @load="imgLoadFinish">
            </view>
            <!-- 马 -->
            <view style="width: 1014rpx;position: absolute;top: 47%;left: 18%;">
              <image style="width:100%;position: absolute;top: 47%;left: 18%;" mode="widthFix"
                src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/horse-n.png"
                @error="imgLoadFinish" @load="imgLoadFinish">
                <image :class=" ele == 'horse' ? 'glowElement': 'displaynone'"
                  style="width:100%;position: absolute;top: 47%;left: 18%;" mode="widthFix"
                  src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/horse-g.png"
                  @error="imgLoadFinish" @load="imgLoadFinish">
            </view>
            <!-- 远处小树 -->
            <view style="width: 940rpx;position: absolute;top: 44%;left: 0;">
              <image style="width:100%;position: absolute;top: 44%;left: 0;" mode="widthFix"
                src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/oak-n.png"
                @error="imgLoadFinish" @load="imgLoadFinish">
                <image :class="ele == 'treelet' ? 'glowElement': 'displaynone'"
                  style="width:100%;position: absolute;top: 44%;left: 0;" mode="widthFix"
                  src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/oak-g.png"
                  @error="imgLoadFinish" @load="imgLoadFinish">
            </view>
            <!-- 海浪 -->
            <view style="width: 2296rpx;;position: absolute;bottom: 0%;left: 0%;">
              <image style="width:100%;position: absolute;bottom: 0%;left: 0%;" mode="widthFix"
                src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress2/n-seawave.png"
                @error="imgLoadFinish" @load="imgLoadFinish">
                <image :class=" ele == 'SeaWave' ? 'glowElement': 'displaynone'"
                  style="width:100%;position: absolute;bottom: 0%;left: 0%;" mode="widthFix" :src="SeaWaveImg"
                  @error="imgLoadFinish" @load="imgLoadFinish">
            </view>
            <!-- 孔雀 -->
            <view style="width: 822rpx;position: absolute;top: 47%;left: 31%;">
              <image style="width:100%;position: absolute;top: 47%;left: 31%;" mode="widthFix"
                src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/Peacock-n.png"
                @error="imgLoadFinish" @load="imgLoadFinish">
                <image :class=" ele == 'Peacock' ? 'glowElement': 'displaynone'"
                  style="width:100%;position: absolute;top: 47%;left: 31%;" mode="widthFix"
                  src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/Peacock-g.png"
                  @error="imgLoadFinish" @load="imgLoadFinish">
            </view>
            <!-- 海浪前景 -->
            <view style="width: 2296rpx;;position: absolute;bottom: 0%;left: 0%;">
              <image style="width:100%;position: absolute;bottom: 0%;left: 0%;" mode="widthFix"
                src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/sea-qian.png"
                @error="imgLoadFinish" @load="imgLoadFinish">
            </view>
            <!-- 三文鱼 -->
            <view style="width: 237rpx;position: absolute;top: 77%;right: 5%;">
              <image style="width:100%;position: absolute;top: 77%;right: 5%;" mode="widthFix"
                src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/finsh-n_03.png"
                @error="imgLoadFinish" @load="imgLoadFinish">
                <image :class="ele == 'fish' ? 'glowElement': 'displaynone'"
                  style="width:100%;position: absolute;top: 77%;right: 5%;" mode="widthFix"
                  src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/finsh-g_03.png"
                  @error="imgLoadFinish" @load="imgLoadFinish">
            </view>
            <!-- 大背景 -->
            <image style="width:100%;" mode="widthFix"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/KV.jpg"
              @error="imgLoadFinish" @load="imgLoadFinish">
          </view>
        </view>
      </scroll-view>

      <!-- 收集元素弹窗 -->
      <view class="element-masking" v-if="elementShow">
        <view class="element-masking-con">
          <view style="width: 100%;">
            <image style="width:100%;height: 940rpx;" mode="widthFix" :src="elementImg">
          </view>
          <!-- 按钮 -->
          <view style="width: 240rpx;margin-top: 55rpx;position: absolute;bottom: 6%;" @click="handelCollectElement"
            v-if="elementButton">
            <image style="width:100%;height: 76rpx;" mode="widthFix"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/button-shouji.png">
          </view>
          <view style="width: 240rpx;margin-top: 55rpx;position: absolute;bottom: 6%;" @click="handelOffElement" v-else>
            <image style="width:100%;height: 76rpx;" mode="widthFix"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/button-guanbi.png">
          </view>
        </view>
      </view>

      <!-- 规则弹窗 -->
      <view class="rules-masking" v-if="rulesPop">
        <view class="rules-masking-con">
          <!-- 标题 -->
          <view class="rules-title">
            <image style="width: 100%;height: 65rpx;"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/rules-title.png" mode="widthFix">
            </image>
          </view>
          <!-- 文字-->
          <view class="rules-text">
            <image style="width: 100%;height: 240rpx;"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/rules-text.png" mode="widthFix">
            </image>
          </view>
          <!-- 知晓按钮 -->
          <view class="know-btn" @click="hanldeOffRules">
            <image style="width: 100%;height: 76rpx;"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/gamerules-btn.png" mode="widthFix">
            </image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import NavBar from '@/components/common/navbar';
  import api from '@/api/api';
  import {
    CUSTOMER_INFO,
  } from '@/utils/constant';
  import {
    lithLaunch
  } from '@/utils/litha_report';
  export default {
    components: {
      navBar: NavBar,
    },
    data() {
      return {
        // 组件所需的参数
        navbarData: {
          whiteIcon: 1,
          showSearchAndBack: 1,
          showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
          isTopFixed: true,
          hideSearch: 1,
        },
        scrollDomView: "",
        scrollLeft: 0,
        // 收集元素的数组
        Elementlist: [{
            id: "horse",
            SelectImg: "https://100000063-1252208446.file.myqcloud.com/images/litha/game/horse-xiao.png",
            status: 0
          },
          {
            id: "Peacock",
            SelectImg: "https://100000063-1252208446.file.myqcloud.com/images/litha/game/Peacock-xiao.png",
            status: 0
          },
          {
            id: "BigTree",
            SelectImg: "https://100000063-1252208446.file.myqcloud.com/images/litha/game/BigTree-xiao.png",
            status: 0
          },
          {
            id: "SeaWave",
            SelectImg: "https://100000063-1252208446.file.myqcloud.com/images/litha/game/SeaWave-xiao.png",
            status: 0
          },
          {
            id: "treelet",
            SelectImg: "https://100000063-1252208446.file.myqcloud.com/images/litha/game/treelet-xiao.png",
            status: 0,
          },
          {
            id: "fish",
            SelectImg: "https://100000063-1252208446.file.myqcloud.com/images/litha/game/finsh-xiao.png",
            status: 0
          }
        ],
        moveData: 0, //记录滑动距离
        elementShow: false, //元素详情弹窗
        elementButton: true,
        GamePlacard: false,
        imgLoadNum: 0, //  图片加载数量
        loadFinish: false,
        treelet: true, //小树
        horse: true, //马
        fish: true, //鱼
        SeaWave: true, //海浪
        Peacock: true, //孔雀
        BigTree: true, //大树
        CurrentElement: "", //当前收集元素
        elementImg: '', //当前点击元素的图片
        rulesPop: false, //控制规则弹窗
        isClick: false,
        tree1: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/g-bigtree.png',
        SeaWaveImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress2/g-seawave.png',
        newElement: [],
        ele: '',
        interval: null,
        num: -1,
        eleindex: -1,
        viewWall: false,
        Inception: 0,
        isIphoneX: false,
      }
    },
    onLoad: async function(option) {
      this.tree1 =
        'https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/g-bigtree.png?t=' +
        new Date()
        .getTime()
      this.SeaWaveImg =
        'https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress2/g-seawave.png?t=' +
        new Date().getTime()
      let params = {
        path: '/pages/litha-launch/game/details',
        pageName: 'game游戏页',
        campaign: 'SZSH_LITHA_LAUNCH-2023'
      }
      getApp().cl_tracker.track('mini_program_view', params)
      wx.reportEvent("mini_program_view", {
        "eventdata": JSON.stringify(params),
        "pagename": params.pageName
      })
      uni.showLoading({
        title: '加载中'
      });

      // 神策埋点
      this.$commonSensors.lithaTrack.crTrack("InteractionPageView", {
        "page_name": "活动页",
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Interaction',
        "second_module_name": "Game",
        "page_status": "加载中"
      })

      // 查询用户存储的元素
      this.getElement();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
      var that = this;
      let systemInfomations = wx.getSystemInfoSync()
      // 机型适配比例系数
      that.scaleFactor = 750 / systemInfomations.windowWidth
      // 当前机型-window高度
      that.windowHeight = systemInfomations.windowHeight * that.scaleFactor //rpx
      // 当前机型-window宽度
      that.windowWidth = systemInfomations.windowWidth * that.scaleFactor //rpx

      let ratio = that.windowWidth / that.windowHeight
      if (ratio < 750 / 1334) {
        that.isIphoneX = true;
      }
    },
    onHide() {
      // 神策埋点
      this.$commonSensors.lithaTrack.cTrack("PageLeave", {
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Game',
        "second_module_name": "Game详情页",
        "view_progress": 1
      })
    },
    methods: {
      // 查询元素
      async getElement() {
        let that = this
        let customerInfo = uni.getStorageSync("uniLoginInfo");
        if (!customerInfo || !customerInfo.openid) {
          await this.$commonFunction.commonUniLogin()
          customerInfo = uni.getStorageSync("uniLoginInfo")
          if(customerInfo?.openid && customerInfo?.unionId){
            that.$commonSensors.binduserid(customerInfo.openid, customerInfo.unionId)
          }
        }

        const json = await api.getElementStatus({
          method: "POST",
          query: {
            openId: customerInfo.openid
          }
        })

        if (json.code === 200 && json.data !== null) {
          this.Elementlist.forEach((item, index) => {
            json.data.forEach((ite, idx) => {
              if (item.id == ite.elementCode) {
                item.status = 1;
                this.Inception += 1
                this[item.id] = false
              }
            })

            if (item.status == 0) {
              this.newElement.push(item.id)
            }
          })

          if (this.Inception == 6) {
            this.viewWall = true
          }

          // 呼吸灯轮循
          this.interval = setInterval(() => {
            if (this.num == -1) {
              this.num = 0
            }
            that.ele = that.newElement[that.num]
            that.num += 1
            if (that.num == that.newElement.length) {
              that.num = 0
            }
          }, 900);
          // 按状态排序
          this.sortby(this.Elementlist, 'status')
        }

      },
      // 存储元素
      async setElement(code) {
        let customerInfo = uni.getStorageSync("uniLoginInfo");
        if (!customerInfo || !customerInfo.openid) {
          await this.$commonFunction.commonUniLogin()
          customerInfo = uni.getStorageSync("uniLoginInfo")
          if(customerInfo?.openid && customerInfo?.unionId){
            that.$commonSensors.binduserid(customerInfo.openid, customerInfo.unionId)
          }
        }
        const json = await api.setElementStatus({
          method: "POST",
          query: {
            openId: customerInfo.openid,
            elementCode: code
          }
        })

        if (json.code == 200 && json.data) {
          this.isClick = false
        }

      },

      imgLoadFinish(e) {
        this.imgLoadNum++;
        if (this.imgLoadNum == 14) {
          this.loadFinish = true;
          this.scrollLeft = 520;
          uni.hideLoading();
          // 神策埋点
          this.$commonSensors.lithaTrack.crTrack("InteractionPageView", {
            "page_name": "活动页",
            "campaign": 'SZSH_LITHA_LAUNCH-2023',
            "first_module_name": 'Interaction',
            "second_module_name": "Game",
            "page_status": "加载完成"
          })
        }
      },
      /**横屏滚动监听
       * @param {Object} e
       */
      gameBoxScroll(e) {
        this.moveData = e.detail.scrollLeft
      },

      // 左滑箭头
      handleLeft() {
        if (this.moveData != 0) {
          this.moveData -= 100
          this.scrollLeft = this.moveData
        }
      },

      // 右滑箭头
      handleRight() {
        if (this.moveData < 770)
          this.moveData += 100
        this.scrollLeft = this.moveData
      },

      // 点击查看元素详情
      handleCollection(type) {
        let element = ''
        if (type == 'horse') {
          element = '元素/西班牙骏马'
        } else if (type == 'Peacock') {
          element = '元素/苏格兰孔雀'
        } else if (type == 'BigTree') {
          element = '元素/成果之树'
        } else if (type == 'treelet') {
          element = '元素/百年橡树'
        } else if (type == 'SeaWave') {
          element = '元素/浪花'
        } else if (type == 'fish') {
          element = '元素/三文鱼'
        }
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'game',
          "c_event_category_2": 'Interaction',
          "c_click_area": element
        }
        getApp().commonClTrack('c_ebmp_draco_update_game_click_element', Params)
        wx.reportEvent("c_ebmp_draco_update_game_click_element", {
          "eventdata": JSON.stringify(Params)
        })

        // 当前查看元素
        this.CurrentElement = type
        if (type == 'treelet') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/treelet-tan_03.png'
        } else if (type == 'horse') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/house-tan_02.png'
        } else if (type == 'fish') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/finsh-tan_03.png'
        } else if (type == 'SeaWave') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/SeaWave-tan_03.png'
        } else if (type == 'Peacock') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/Peacock-tan_03.png'
        } else if (type == 'BigTree') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/BigTree-tan_03.png'
        }
        this.elementButton = true
        this.elementShow = true
      },

      // 点击收集元素
      handelCollectElement() {
        let that = this
        let element = ''
        let element2 = ''
        if (this.CurrentElement == 'horse') {
          element = '元素/西班牙骏马'
          element2 = '收集/西班牙骏马'
        } else if (this.CurrentElement == 'Peacock') {
          element = '元素/苏格兰孔雀'
          element2 = '收集/苏格兰孔雀'
        } else if (this.CurrentElement == 'BigTree') {
          element = '元素/成果之树'
          element2 = '收集/成果之树'
        } else if (this.CurrentElement == 'treelet') {
          element = '元素/百年橡树'
          element2 = '收集/百年橡树'
        } else if (this.CurrentElement == 'SeaWave') {
          element = '元素/浪花'
          element2 = '收集/浪花'
        } else if (this.CurrentElement == 'fish') {
          element = '元素/三文鱼'
          element2 = '收集/三文鱼'
        }

        // 神策埋点
        this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '游戏元素收集', 'popup_name': '游戏元素收集弹窗', 'campaign': 'SZSH_LITHA_LAUNCH-2023'})
        this.$commonSensors.lithaTrack.popupClick({
          'campaign':'SZSH_LITHA_LAUNCH-2023',
          'popup_type':'游戏元素收集',
          'popup_name':'游戏元素收集弹窗',
          'button_name':element2
        })
        this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
          "page_name": "活动页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Interaction',
          "second_module_name": "Game",
          "operation_type": "点击",
          "button_name":element2
        })

        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'game',
          "c_event_category_2": 'Interaction',
          "c_click_area": element
        }
        getApp().commonClTrack('c_ebmp_draco_update_game_collect_element', Params)
        wx.reportEvent("c_ebmp_draco_update_game_collect_element", {
          "eventdata": JSON.stringify(Params)
        })
        if (this.isClick) return
        this.isClick = true
        let num = 0
        clearInterval(this.interval)
        this.Elementlist.forEach((item, index) => {
          if (item.id == this.CurrentElement) {
            this.setElement(item.id)
            item.status = 1
            this.elementShow = false
          }
          if (item.status) {
            num += 1
          }
        })

        // 收集完成后删除指定元素
        let index = this.newElement.indexOf(this.CurrentElement);
        let indexs = index;
        if (index !== -1) {
          this.newElement.splice(index, 1);
          if (indexs == this.newElement.length) {
            this.num = 0
          } else {
            this.num = indexs
          }
        }

        this.interval = setInterval(() => {
          that.ele = that.newElement[that.num]
          that.num += 1
          if (that.num == that.newElement.length) {
            that.num = 0
          }
        }, 1000);

        // 按状态排序
        this.sortby(this.Elementlist, 'status')

        if (num == 6) {
          clearInterval(this.interval)
          this.ele = ''
          this.viewWall = true
          uni.navigateTo({
            url: '/pages/litha-launch/game/gamePlacard?id=' + 1
          });
        }

        if (this.CurrentElement == 'treelet') {
          this.treelet = false
        } else if (this.CurrentElement == 'horse') {
          this.horse = false
        } else if (this.CurrentElement == 'fish') {
          this.fish = false
        } else if (this.CurrentElement == 'SeaWave') {
          this.SeaWave = false
        } else if (this.CurrentElement == 'Peacock') {
          this.Peacock = false
        } else if (this.CurrentElement == 'BigTree') {
          this.BigTree = false
        }
      },

      // 排序
      sortby(arr, key) {
        return arr.sort(function(a, b) {
          var a1 = a[key];
          var b1 = b[key];
          return (b1 - a1);
        });
      },

      // 点击小icon查看详情
      handelElementList(item) {
        let elements = ''
        if (item.id == 'treelet') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/treelet-tan_03.png'
          elements = '元素/百年橡树'
        } else if (item.id == 'horse') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/house-tan_02.png'
          elements = '元素/西班牙骏马'
        } else if (item.id == 'fish') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/finsh-tan_03.png'
          elements = '元素/三文鱼'
        } else if (item.id == 'SeaWave') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/SeaWave-tan_03.png'
          elements = '元素/浪花'
        } else if (item.id == 'Peacock') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/Peacock-tan_03.png'
          elements = '元素/苏格兰孔雀'
        } else if (item.id == 'BigTree') {
          this.elementImg = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/BigTree-tan_03.png'
          elements = '元素/成果之树'
        }

        if (item.status == 1) {
          this.elementButton = false
          this.elementShow = true

          let Params = {
            "campaign": 'SZSH_LITHA_LAUNCH-2023',
            "c_event_category_1": 'game',
            "c_event_category_2": 'Interaction',
            "c_click_area": elements
          }
          getApp().commonClTrack('c_ebmp_draco_update_game_click_element_icon', Params)
          wx.reportEvent("c_ebmp_draco_update_game_click_element_icon", {
            "eventdata": JSON.stringify(Params)
          })

          // 神策埋点
          this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '游戏元素详情', 'popup_name': '游戏元素详情弹窗', 'campaign': 'SZSH_LITHA_LAUNCH-2023'})
          this.$commonSensors.lithaTrack.popupClick({
            'campaign':'SZSH_LITHA_LAUNCH-2023',
            'popup_type':'游戏元素详情',
            'popup_name':'游戏元素详情弹窗',
            'button_name':elements
          })
          this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
            "page_name": "活动页",
            "campaign": 'SZSH_LITHA_LAUNCH-2023',
            "first_module_name": 'Interaction',
            "second_module_name": "Game",
            "operation_type": "点击",
            "button_name":elements
          })
        }
      },

      // 关闭弹窗
      handelOffElement() {
        this.elementShow = false
        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
          "page_name": "活动页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Interaction',
          "second_module_name": "Game",
          "operation_type": "点击",
          "button_name":"关闭"
        })
      },

      // 打开规则弹窗
      hanldeOpenRules() {
        this.rulesPop = true
        this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '游戏规则', 'popup_name': '游戏规则弹窗', 'campaign': 'SZSH_LITHA_LAUNCH-2023'})
      },

      // 查看壁纸
      hanldeWallpaper() {
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'game',
          "c_event_category_2": 'Interaction',
          "c_pagename": '游戏场景页面',
          "c_link_pagename": '游戏壁纸下载页',
          "c_link_path": '/pages/litha-launch/game/gamePlacard'
        }
        getApp().commonClTrack('c_ebmp_draco_update_game_view_wallpaper', Params)
        wx.reportEvent("c_ebmp_draco_update_game_view_wallpaper", {
          "eventdata": JSON.stringify(Params)
        })

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
          "page_name": "活动页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Interaction',
          "second_module_name": "Game",
          "operation_type": "点击",
          "button_name":"查看壁纸"
        })

        uni.navigateTo({
          url: '/pages/litha-launch/game/gamePlacard'
        });
      },

      // 关闭规则弹窗
      hanldeOffRules() {
        this.rulesPop = false
        this.$commonSensors.lithaTrack.popupClick({
          'campaign':'SZSH_LITHA_LAUNCH-2023',
          'popup_type':'游戏规则',
          'popup_name':'游戏规则弹窗',
          'button_name':'关闭'
        })
      },

      onShareAppMessage: async function(res) {
        let that = this
        let imageUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/Game-500_400.png'
        let path = '/pages/litha-launch/game'
        let title = '解锁新生图鉴，即刻步入麦卡伦庄园体验奇境探秘'
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        this.$commonSensors.sensorsPageShare()
        return this.$commonFunction.commonShare(res, title, path, imageUrl)
      },
      onShareTimeline() {
				this.$sr.setContext({ share_title: '解锁新生图鉴，即刻步入麦卡伦庄园体验奇境探秘' });
        return {
          title: '解锁新生图鉴，即刻步入麦卡伦庄园体验奇境探秘',
          query: '',
          imageUrl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/Game-500_400.png'
        };
      },
    }
  }
</script>

<style lang="less">
  .game-detail {
    width: 100%;
    height: 100vh;
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/game/game-detailsbg.jpg');
    background-size: 100% 100%;
  }

  .game-box {
    width: 100%;
    height: 100vh;
    position: relative;

    .left-btnbox {
      width: 50rpx;
      height: 88rpx;
      position: absolute;
      top: 52%;
      left: 33rpx;
      z-index: 10;
    }


    .right-btnbox {
      width: 50rpx;
      height: 88rpx;
      position: absolute;
      top: 52%;
      right: 33rpx;
      z-index: 10;
    }

    .element-box {
      width: 100%;
      height: 115rpx;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      // justify-content: space-around;
      position: absolute;
      bottom: 80rpx;
      box-sizing: border-box;
      z-index: 199;

      .element-listbox {
        width: 116rpx;
        height: 115rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }


  .scroll_item_box {
    min-width: 2296rpx;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 0 !important;
    border: 0;
    display: inline-block;
    line-height: 0;
    overflow: hidden;
    position: relative;
  }


  .scroll_item_inner {
    min-width: 2296rpx;
    height: 1670rpx;
    margin: 0;
    padding: 0;
    font-size: 0 !important;
    border: 0;
    line-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 0;
  }


  .element-masking {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 299;

    .element-masking-con {
      width: 750rpx;
      height: 940rpx;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
  }


  .displaynone {
    display: none;
    opacity: 0;
    z-index: -12;
  }

  .glowElement {
    animation: glow 1s linear infinite;
    -webkit-animation: glow 1s linear infinite;
    /* Safari and Chrome */
  }


  @keyframes glow {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }


  @-webkit-keyframes glow {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .rules-masking {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 399;

    .rules-masking-con {
      width: 562rpx;
      height: 691rpx;
      background: url('https://100000063-1252208446.file.myqcloud.com/images/litha/game/game-rules-bg.png');
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .rules-title {
        width: 250rpx;
        height: 65rpx;
        margin-top: 75rpx;
      }


      .rules-text {
        width: 470rpx;
        height: 240rpx;
        margin-top: 75rpx;
      }

      .know-btn {
        width: 240rpx;
        height: 76rpx;
        margin-top: 75rpx;
      }
    }
  }

  .game-rules {
    position: absolute;
    width: 78rpx;
    height: 77rpx;
    top: 230rpx;
    right: 37rpx;
    z-index: 199;
  }

  .game-wallpaper {
    position: absolute;
    width: 78rpx;
    height: 77rpx;
    top: 330rpx;
    right: 37rpx;
    z-index: 199;
  }


  .treelet1624 {
    width: 390rpx;
    height: 240rpx;
    position: absolute;
    top: 43%;
    left: 8%;
    z-index: 99;
  }

  .treelet1334 {
    width: 390rpx;
    height: 240rpx;
    position: absolute;
    top: 31%;
    left: 8%;
    z-index: 99;
  }

  .horse1624 {
    width: 364rpx;
    height: 520rpx;
    position: absolute;
    top: 47%;
    left: 47%;
    z-index: 99;
  }

  .horse1334 {
    width: 364rpx;
    height: 520rpx;
    position: absolute;
    top: 36%;
    left: 47%;
    z-index: 99;
  }

  .fish1624 {
    width: 220rpx;
    height: 140rpx;
    position: absolute;
    bottom: 14%;
    right: 6%;
    z-index: 99;
  }

  .fish1334 {
    width: 220rpx;
    height: 140rpx;
    position: absolute;
    bottom: 17%;
    right: 6%;
    z-index: 99;
  }

  .SeaWave11624 {
    width: 910rpx;
    height: 530rpx;
    position: absolute;
    top: 65%;
    left: 1%;
    z-index: 99;
  }

  .SeaWave11334 {
    width: 910rpx;
    height: 530rpx;
    position: absolute;
    top: 58%;
    left: 1%;
    z-index: 99;
  }

  .SeaWave21624 {
    width: 520rpx;
    height: 136rpx;
    position: absolute;
    top: 58%;
    left: 1%;
    z-index: 99;
  }

  .SeaWave21334 {
    width: 520rpx;
    height: 136rpx;
    position: absolute;
    top: 50%;
    left: 1%;
    z-index: 99;
  }

  .Peacock11624 {
    width: 282rpx;
    height: 520rpx;
    position: absolute;
    top: 47%;
    left: 64%;
    z-index: 99;
  }

  .Peacock11334 {
    width: 282rpx;
    height: 520rpx;
    position: absolute;
    top: 36%;
    left: 64%;
    z-index: 99;
  }

  .Peacock21624 {
    width: 464rpx;
    height: 183rpx;
    position: absolute;
    top: 79%;
    left: 44%;
    z-index: 99;
  }

  .Peacock21334 {
    width: 464rpx;
    height: 183rpx;
    position: absolute;
    top: 77%;
    left: 44%;
    z-index: 99;
  }

  .BigTree51624 {
    width: 664rpx;
    height: 205rpx;
    position: absolute;
    top: 27%;
    left: 13%;
    z-index: 99;
  }

  .BigTree41624 {
    width: 299rpx;
    height: 305rpx;
    position: absolute;
    top: 25%;
    left: 0%;
    z-index: 99;
  }

  .BigTree21624 {
    width: 160rpx;
    height: 370rpx;
    position: absolute;
    top: 27%;
    left: 60%;
    z-index: 99;
  }

  .BigTree31624 {
    width: 299rpx;
    height: 548rpx;
    position: absolute;
    top: 10%;
    left: 0%;
    z-index: 99;
  }

  .BigTree31334 {
    width: 299rpx;
    height: 403rpx;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 99;
  }

  .BigTree61624 {
    width: 508rpx;
    height: 175rpx;
    position: absolute;
    top: 27%;
    right: 0%;
    z-index: 99;
  }

  .BigTree71624 {
    width: 110rpx;
    height: 73rpx;
    position: absolute;
    top: 37%;
    right: 0%;
    z-index: 99;
  }
</style>
